<template>
	<view class="header">
		<text class="iconfont icon-xiangzuojiantou"></text>
		<text>拼团订单详情-待发货</text>
	</view>
	<view class="header1">
		
	</view>
	<view class="daojishi">
		<text class="iconfont icon-shijian"></text>
		<text>待发货</text>
	</view>
	<view class="guodu">
	</view>
	<view class="dizhi" @click="dingdandizhi">
		<view class="iconfont icon-dizhi">
		</view>
		<view class="shouhuoren">
			<view class="">
			<text>收货人:</text>&nbsp  <text>{{xiangqing.ryshpe}}</text>&nbsp  <text>{{xiangqing.ryshtel}}</text>
			</view>
			<br>
			<view class="">
			<text>收货地址:</text>&nbsp  <text>{{xiangqing.tzdz}}</text>
			</view>
			
		</view>
		<view class="iconfont icon-youjiantou">
		</view>
	</view>
	<view class="guodu">
	</view>
	<view class="kaituan">
		<view class="">
		拼团成功
		</view>
		<view class="">
			<image :src="IP+xiangqing.y_imgsrc" mode=""></image>
			<image src="../../static/image/qiuxg/2.png" mode=""></image>
		</view>
		<view class="btnn">
			<button type="warn" size="mini" @click="chakan">查看团详情</button>
		</view>
	</view>
	<view class="guodu">
	</view>
	<view class="">
		<view class="dingdan">
			<text>订单明细</text>
		</view>
		<view class="xinxi">
			<view class="tupian">
				<image :src="IP+xiangqing.yp_imgsrc" mode=""></image>
			</view>
			<view class="yaopin">
				<view>{{xiangqing.yp_mingcheng}}</view>
				<br>
				<text>￥{{xiangqing.pt_tuangoujiage}}</text>
				<text>{{xiangqing.pt_jiage}}</text>
			</view>
			<view class="shuliang">
				x{{xiangqing.yaopinshuliang}}
			</view>
		</view>
	</view>
	<view class="guodu">
	</view>
	<view class="jiage">
		<view class="zongjia">
			<text>商品总价:</text><text>￥{{xiangqing.pt_tuangoujiage*xiangqing.yaopinshuliang}}.00</text>
		</view>
		<view class="yunfei">
			<text>运费:</text><text>￥{{xiangqing.yp_yunfei}}</text>
		</view>
		<view class="youhuiquan">
			<text>优惠券:</text><text>-￥0.00</text>
		</view>
		<view class="shifukuan">
			<text>实付款:</text><text>￥{{total}}.00</text>
		</view>
	</view>
	<view class="guodu">
	</view>
	<view class="footer">
		<view class="bianhao">
			<text>订单编号:</text>&nbsp&nbsp<text>{{xiangqing.ptdd_bianhao}}</text>
			<view class="fuzhi" @click="fuzhi()">
				复制
			</view>
		</view>
		<view class="xiadan">
			<text>下单时间:</text>&nbsp&nbsp<text>{{xiangqing.pt_jieshutime}}</text>
		</view>
		<view class="fangshi">
			<text>支付方式:</text>&nbsp&nbsp
			<text>微信</text>
		</view>
		<view class="shijian">
			<text>支付时间:</text>&nbsp&nbsp
			<text>2020-03-03 12:00:32</text>
		</view>
	</view>
	<view class="guodu1">
	</view>
	<view class="btn1">
	</view>
	<view class="btn">
		<view @click="quxiao()">取消订单</view>
		<view @click="fahuo">提醒发货</view>
	</view>
</template>

<script>
	import {reactive,toRefs,computed,onMounted} from 'vue'
	import {useStore} from 'vuex'
	import http from '../../utils/http.js'
	import store from '../../store/index.js'
	export default {
		setup(){
			const {state,getters,commit,dispatch} = useStore();
			let data=reactive({
				IP:computed(()=>state.IP),
				xiangqing:computed(()=>state.ptdingdan.xiangqing),
				total:computed(()=>state.ptdingdan.total),
				// 取消订单
				quxiao(){
						let id=data.xiangqing
					      uni.showModal({
					      	title: '',
					      	content: '确定取消订单?',
					      	success: function (res) {
					      		if (res.confirm) {
					      			uni.showToast({
					      				title: '已取消',
					      				duration: 2000,
										icon:'success'
					      			});
									http({
										url:'/ptdingdandelet',
										method:'post',
										data:{
											id:id.ptdd_id
										}
									}).then((res)=>{
										uni.navigateTo({url:'/pages/ptdaizhifu/ptdaizhifu'})
									})
					      		} else if (res.cancel) {
					      			console.log('用户点击取消');
					      	}
					    }
					})
				},
				// 复制订单
				 fuzhi(){
				      let value = data.xiangqing.ptdd_bianhao; // 复制的内容  我这里写死  可以通过参数传过来
				      //uni.setClipboardData方法就是讲内容复制到粘贴板
				      uni.setClipboardData({
				        data:value,//要被复制的内容
				        success:()=>{//复制成功的回调函数
				          uni.showToast({//提示
				            title:"复制成功"
				          })
				        }
				      });
				    },
				// 发货
				    fahuo(){
						uni.showToast({
							title: '提醒发货成功',
							duration: 2000,
							icon:'success'
						});
					},
				dingdandizhi(){
					uni.navigateTo({
						url:'/pages/ptxqdizhi/ptxqdizhi'
					})
				},
				chakan(){
					uni.navigateTo({
						url:'/pages/ptcg/ptcg'
					})
				}
			})
			onMounted(()=>{
				// data.IP=store.state.IP
				commit('ptdingdan/see',data.xiangqing)
			})
				return {...toRefs(data)}
		}
	}
</script>
<style lang="scss">
	@import url("~@/static/fonts/iconfont.css");
.header{
	position: fixed;
	height: 50rpx;
	background-color: white;
	width: 100%;
	top:0;
	z-index: 1;
	// border-bottom: 1px solid black;
	}
.header1{
	height: 50rpx;
	background-color: #FFFFFF;
	width: 100%;
	top:0;
	// border-bottom: 1px solid black;
}
.daojishi{
	display: flex;
	// justify-content: space-around;
	// border: 1px solid black;
	background-color: #DA2222;
	color: white;
	padding: 50rpx 0;
	margin-top: 20rpx;
	text{
		margin: 0 20rpx;
	}
}
.guodu{
	background-color: #F2F2F2;
	height: 16rpx;
}
.shouhuoren{
	view:nth-of-type(1){
		margin-bottom: 30rpx;
	}
}
.dizhi{
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 160rpx;
	// border: 1px solid black;
}
.kaituan{
	// display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	padding: 20rpx;
	view:nth-of-type(1){
		text-align: center;
		text{
			color: red;
		}
	}
	view:nth-of-type(2){
		text-align: center;
		image{
			width: 120rpx;
			height: 100rpx;
			margin-top: 20rpx;
			
		}
	}
	.btnn{
		display: flex;
		margin-top: 30rpx;
	}
}
.dingdan{
		margin-top: 50rpx;
		margin-bottom: 20rpx;
		text:nth-of-type(1){
			margin-left: 24rpx;
		}
	}
	.xinxi{
		display: flex;
		padding: 20rpx 20rpx;
	}
	.tupian{
		image{
			width: 200rpx;
			height: 200rpx;
		}
	}
	.yaopin{
		margin-left: 10rpx;
		view:nth-of-type(1){
			padding: 40rpx 40rpx;
		}
		text{
			margin: 0rpx 40rpx;
		}
			
		text:nth-of-type(1){
			color: red;
		}
		text:nth-of-type(2){
			color: gray;
			text-decoration: line-through;
		}
	}
	.shuliang{
		margin-top: 100rpx;
		margin-left: 20rpx;
	}
	.zongjia,.yunfei,.youhuiquan{
		display: flex;
		justify-content: space-between;
		text:nth-of-type(1){
			margin-left: 20rpx;
			padding: 30rpx 0;
		}
		text:nth-of-type(2){
			margin-right: 50rpx;
			color: red;
			padding: 30rpx 0;
		}
	}
	.shifukuan{
		display: flex;
		justify-content: flex-end;
		margin-right: 50rpx;
		padding: 30rpx 0;
		text:nth-of-type(2){
			color: red;
		}
	}
	.btn1{
		height: 50rpx;
		width: 100%;
		background-color: white;
		padding: 20rpx 0 100rpx 0;
	}
	.btn{
		padding: 20rpx 0 100rpx 0;
		bottom: 0;
		height: 50rpx;
		width: 100%;
		background-color: white;
		position: fixed;
		display: flex;
		justify-content: space-around;
		view:nth-of-type(1){
			height: 60rpx;
			line-height: 60rpx;
		border: 1px solid #DA2222;
		margin-left: 350rpx;
		padding: 0 20rpx;
		}
		view:nth-of-type(2){
			padding: 0 20rpx;
			height: 60rpx;
			line-height: 60rpx;
		border: 1px solid #DA2222;
		background-color: #DA2222;
		color: #FFFFFF;
		margin-right: 30rpx;
		}
	}
	.footer{
		padding: 40rpx 30rpx;
		.bianhao{
			display: flex;
			box-sizing: border-box;
			margin-bottom: 30rpx;
			.fuzhi{
				margin-left: 100rpx;
				border: 1px solid black;
				padding: 10rpx 20rpx;
				font-size:20rpx;
			}
		}
		.shijian,.fangshi,.xiadan{
			margin-bottom: 30rpx;
		}
	}
	.guodu1{
		background-color: #F2F2F2;
		height: 30rpx;
	}
</style>
